<template>
  <div class="sy">
    <!-- 头部 -->
    <div class="navbar">
      <van-nav-bar :border="false" @click-left="$router.push('/mine')">
        <template #title> <span class="fsbu">发布的送养</span> </template>
        <template #left>
          <van-icon name="arrow-left" color="#fcfcfd" size="18px" />
        </template>
      </van-nav-bar>
    </div>
    <!-- 送养详情 -->
    <div class="zhongjian">
      <div v-for="index in data" :key="index.nid">
        <van-card :title="index.nickname" :thumb="index.imgname">
          <template #tags>
            <div class="jiankang">
              <van-tag plain type="danger" v-if="index.status.split(',')[0]">{{
                index.status.split(",")[0]
              }}</van-tag>
              <van-tag plain type="danger" v-if="index.status.split(',')[1]">{{
                index.status.split(",")[1]
              }}</van-tag>
              <van-tag plain type="danger" v-if="index.status.split(',')[2]">{{
                index.status.split(",")[2]
              }}</van-tag>
              <van-tag
                plain
                type="danger"
                v-if="index.status.split(',')[3]"
              ></van-tag>
            </div>
          </template>

          <template #footer>
            <van-icon style="margin-right: 10px" name="edit" size="0.7rem" />
            <van-icon
              name="delete-o"
              size="0.7rem"
              @click="delet(index.nickname)"
            />
          </template>
        </van-card>
      </div>
    </div>
  </div>
</template>

<script>
import { getsend, delsend } from "@/api/request";
import { Dialog } from "vant";
export default {
  data() {
    return {
      data: [],
      info: "",
    };
  },
  methods: {
    delet(information) {
      this.info = information;
      delsend({ nickname: this.info }).then(res => {
        console.log(res);
        if (res.data.status == 200) {
          Dialog({ message: "删除成功" });
          this.a();
        }
      });
    },
    a() {
      getsend().then(res => {
        console.log(res);
        res.data.message.forEach(item => {
          if (item.uid == this.$store.state.user.uid) {
            this.data.push(item);
          }
        });

        console.log(this.data);
      });
    },
  },
  mounted() {
    this.a();
  },
};
</script>

<style lang="scss" scoped>
span,
a,
p,
strong,
i,
em {
  font-size: 0.3rem;
  white-space: nowrap;
}

.sy {
  width: 100vw;
  height: 100vh;
  background-image: -webkit-gradient(
    linear,
    0% 0%,
    0% 35%,
    from(#face23),
    to(#fff)
  );

  .van-nav-bar {
    width: 100vw;
    background-color: transparent;
  }
  .fsbu {
    font-size: 0.5rem;
    color: #fefbf1;
  }
  .zhongjian {
    height: 561px;
    // background-color: #face23;
    overflow: scroll;
  }
}
.van-card {
  width: 90%;
  margin: auto;
  margin-bottom: 10px;
  background: rgb(255, 255, 255);
  border-radius: 10px;
  box-shadow: 0px 0px 3px 0px rgba(207, 203, 203, 1);
}
.van-card__header {
  display: flex;
  flex-direction: row-reverse;
}
.van-card__thumb {
  height: 2rem;
}
.van-card__title {
  font-size: 0.5rem;
  line-height: 0.6rem;
  margin-bottom: 15px;
}
.van-card__footer {
  padding-right: 15px;
}
.jiankang {
  display: flex;

  .van-tag--danger.van-tag--plain {
    color: #bb5e57;
    width: 80px;
    height: 35px;
    padding: 0 5px;
    border-radius: 7px;
    margin-right: -2px;
    background: #fef4f3;
    font-size: 0.3rem;
    border: none;
    margin: 5px 5px;
    white-space: normal;

    word-wrap: break-word;

    word-break: break-all;
  }
  .van-tag--danger.van-tag--plain:nth-child(2) {
    height: 35px;
    line-height: 35px;
  }
  .van-tag--plain::before {
    border: none;
  }
}
.van-nav-bar {
  ::v-deep .van-icon {
    color: black;
  }
  ::v-deep .van-nav-bar__title {
    font-weight: bold;
    font-family: "黑体";
  }
}
</style>
